<template>
    <div class="page-video">
        <home-layout :topMenus="topMenus">
            <a-popover
                title="添加标签"
                trigger="click"
                placement="bottomLeft"
                overlayClassName="user-wrapper"
                :overlayStyle="{ width: '530px', top: '50px' }"
                v-if="cates.length"
            >
                <template slot="content">
                    <div class="cate-area">
                        <span class="cates">
                            <span
                                class="cate"
                                :class="{ current: cate.id == groupId }"
                                v-for="cate in cates"
                                :key="cate.id"
                                @click="selectCate(cate)"
                                >{{ cate.name }}</span
                            >
                        </span>
                    </div>
                </template>
                <a-button size="small" style="font-size: 12px; margin: 12px 0">
                    {{ currentCatename }}
                    <a-icon type="down" style="font-size: 10px" />
                </a-button>
            </a-popover>

            <div style="display: flex" v-if="cates.length">
                <span style="marginright: 3px; flex: 0 0 42px">标签 : </span>
                <a-breadcrumb>
                    <a-breadcrumb-item
                        v-for="cate in top10cates"
                        :key="cate.id"
                    >
                        <a class="tag" @click="selectCate(cate)">{{
                            cate.name
                        }}</a>
                    </a-breadcrumb-item>
                </a-breadcrumb>
            </div>

            <ul class="videos" v-if="videos.length">
                <video-item
                    v-for="(video, index) in videos"
                    :video="video"
                    :key="`${video.id}_${index}`"
                    :showCreator="false"
                />
            </ul>
            <p style="text-align: center; margintop: 15px" v-else
                >暂无推荐视频</p
            >
            <infinite-loading
                forceUseInfiniteWrapper=".ant-layout-content"
                :identifier="infiniteId"
                @infinite="loadmore"
                v-if="userId"
            />
        </home-layout>
    </div>
</template>

<script>
import HomeLayout from "@/layouts/HomeLayout";
import videoItem from "@/components/Common/video-item";
import { getVideo, getVideoCates } from "@/api/video";
import { normalVideo } from "@/utils/video";
import { mapGetters } from "vuex";

export default {
    name: "videos",
    data() {
        return {
            videos: [],
            topMenus: [
                {
                    title: "视频",
                    href: "/video",
                },
                {
                    title: "MV",
                    href: "/mv",
                },
            ],
            cateVisible: false,
            cates: [],
            groupId: 5100,
            infiniteId: +new Date(),
            selected: false,
        };
    },
    computed: {
        ...mapGetters("User", ["userId"]),
        top10cates() {
            return this.cates.slice(0, 10);
        },
        currentCatename() {
            return (
                (this.cates.length &&
                    this.cates.find((cate) => cate.id == this.groupId).name) ||
                ""
            );
        },
    },
    components: { HomeLayout, videoItem },
    activated() {
        this._getVideoCates();
        this.videos = [];
        this.infiniteId += 1;
    },
    beforeRouteLeave(to, from, next) {
        this.selected = false;
        next();
    },
    methods: {
        async loadmore($state) {
            try {
                let groupId = this.selected
                    ? this.groupId
                    : this.$route.query.groupId || this.groupId;
                let res = await getVideo(groupId);
                $state.loaded();
                if (res.datas.length || res.hasmore) {
                    res.datas.forEach((item) => {
                        this.videos.push(normalVideo(item.data));
                    });
                } else {
                    $state.complete();
                }
            } catch (error) {
                $state.error();
            }
        },
        async _getVideoCates() {
            let { data } = await getVideoCates();
            this.cates = data;
        },
        selectCate(cate) {
            this.selected = true;
            this.groupId = cate.id;
            this.videos = [];
            this.infiniteId += 1;
        },
    },
};
</script>

<style lang="less" scoped>
@import "./../../styles/mixins";

.page-video {
    min-height: 100vh;
    .videos {
        .grid-layout(15px, 220px);
        padding: 15px 0;
        .video {
            .media-wrap {
                position: relative;
                padding-top: 56%;
                overflow: hidden;
                .avatar {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 100%;
                    background-size: contain;
                    border: 1px solid #ddd;
                }
            }
            .title {
                font-size: 13px;
                color: #333;
            }
        }
    }
}

.cates {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    .cate {
        display: inline-block;
        width: 20%;
        border: 1px solid #f3f5f7;
        line-height: 33px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
        &.current {
            background: @primary-color;
            color: #fff;
            border-color: @primary-color;
        }
    }
}
</style>
<style>
.user-wrapper .ant-popover-inner-content {
    max-height: 400px;
    overflow-y: auto;
}

.user-wrapper .ant-popover-title {
    padding: 15px;
}
</style>
